<!-- 营销管理-商品推荐 -->
<template>
    <div>
    <el-card style="max-width: 100%;">
        <search-box :tableDataInput="tableData" :searchField="'title'" @search="handleSearch"></search-box>
        <el-table :data="selectedItems" style="margin-top: 16px;font-size: 16px;"
            :header-cell-style="{ background: '#EBEEF2' }" :row-style="{ height: '80px' }">
            <el-table-column prop="logo" label="图标" align="center" >
                <template slot-scope="scope">
                    <el-image style="width: 60px;height: 60px;" :src="scope.row.logo"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="专题名称" align="center">
              
            </el-table-column>
            <el-table-column width="200" prop="activitydetail" label="专题说明" align="center" />
            <el-table-column prop="joinProduct" label="参与商品" align="center" >
                <template   slot-scope="scope">
                    <span @click="showDialog" >{{ scope.row.joinProduct }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="activitystatus" label="审核中" align="center">
                <template slot-scope="scope">
                    <span @click="showDialog2">{{ scope.row.activitystatus }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="passstatus" label="通过审核" align="center" >
                <template slot-scope="scope">   
                    <span @click="showDialog3">{{ scope.row.passstatus }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="starttime" label="被拒绝" align="center" >
                <template slot-scope="scope">
                    <span @click="showDialog4">{{ scope.row.starttime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template >
                    <div @click="showaddProduct" ><img
                            src="../../assets/marketing/添加.svg" class="participate">
                        <span>商品</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <recommend-dailog-vue :dialogVisibleshow.sync="Visibledetail" :name.sync="name" ></recommend-dailog-vue>
    <AddCommity :addVisible.sync="Visibleadd" @getclose="closeadd" ></AddCommity>
</div>
</template>
<script>
import RecommendDailogVue from './components/RecommendDailog.vue';
import AddCommity from './components/AddCommity.vue';
export default {
    components: { 
        RecommendDailogVue, 
        AddCommity
    },
    data() {
        return {
            selectedItems: [],
            currentRowData: null, // 用于存储当前行的数据 
            Visibledetail: false,
            Visibleadd: false,
            tableData: [
                {
                    logo: require('../../assets/recommendgoods/1.jpg'),
                    name: '端午节特卖专题',
                    activitydetail: '专门为端午节期间推出的特别专买，参与特卖商品必须与节日相关',
                    joinProduct: 345,
                    activitystatus: 344,
                    passstatus: 344,
                    starttime: 344,
                },
                {
                    logo: require('../../assets/recommendgoods/1.jpg'),
                    name: '端午节特卖专题',
                    activitydetail: '专门为端午节期间推出的特别专买，参与特卖商品必须与节日相关',
                    joinProduct: 345,
                    activitystatus: 344,
                    passstatus: 344,
                    starttime: 344,
                },
                {
                    logo: require('../../assets/recommendgoods/1.jpg'),
                    name: '端午节特卖专题',
                    activitydetail: '专门为端午节期间推出的特别专买，参与特卖商品必须与节日相关',
                    joinProduct: 345,
                    activitystatus: 344,
                    passstatus: 344,
                    starttime: 344,
                },
               
            ],
             first:'first',
             second:'second',
             third:'third',
             fourth:'fourth',
             name:'',
        }
    },
    created() {
        this.selectedItems = this.tableData; // 初始显示所有商品
    },
    methods: {
        showaddProduct(){
            this.Visibleadd = true
        },
        handleSearch(filtered) {
            // this.selectedItems = filtered;
        },
        participate(index,row) {
            console.log(index)//所点击的为第几列
            console.log(row)//所点击的这一列的数据
            // this.Visible = true
        },
        showDialog(){
            console.log('showDialog')
            this.Visibledetail = true
            this.name = this.fourth
            console.log(this.Visibledetail)
        },
        showDialog2(){
            console.log('showDialog2')
            this.Visibledetail = true
            this.name = this.second
            console.log(this.Visibledetail)
        },
        showDialog3(){
            console.log('showDialog3')
            this.Visibledetail = true
            this.name = this.first
            console.log(this.Visibledetail)
        },
        showDialog4(){
            console.log('showDialog4')
            this.Visibledetail = true
            this.name = this.third
            console.log(this.Visibledetail)
        },
        closeDialog1(data){
            this.Visibledetail =data
        },
        closeadd(){
            this.Visibleadd = false
        }
        // handleclose(data){
        //     this.Visible = data
        // }
        // updateVisible() {
        //     this.Visible = false
        // }
    },
}
</script>

<style scoped>
.input1 {
    font-size: 16px;
    width: 241px;
    opacity: 1;
    border-radius: 80px;
    background: rgb(153, 155, 158);
}

.input1>>>input.el-input__inner {
    background: rgba(235, 238, 242, 1);
    border-radius: 20px;
}

.participate {
    width: 12px;
    height: 12px;
    position: relative;
    top: 2px;
    margin-right: 5px;
}
</style>